<template>
  <i-drawer v-model="isShow" @confirm="outLog" title="你确认要退出登录吗？" confirm_title="退出登录"></i-drawer>
  <view class="userInfo">
    <view class="edit_info_box">
      <view class="edit_info_title">
        <image src="../../static/images/zs_icon.png" mode="widthFix"
          style="width: 32rpx; height: 32rpx; margin-right: 12rpx"></image>
        基本信息
      </view>
      <i-buttons radius="48rpx" :disabled="disabled" bgColor="linear-gradient( 90deg, #FFCC5F 0%, #FFB23D 100%)"
        color="#fff" padding="12rpx 32rpx" fontSize="32rpx" @click="editInfo">保存</i-buttons>
    </view>
    <i-lineRow title="头像" :diyRight="true" @click="showUploadImg">
      <template #right>
        <image class="image" :src="formData.avatar"></image>
        <view class="goto">
          <image src="../../static/images/goto_icon.png" mode=""></image>
        </view>
      </template>
    </i-lineRow>
    <i-lineRow title="昵称" :diyRight="true">
      <template #right>
        <input class="input" type="text" v-model="formData.nickName" placeholder="请输入昵称" />
        <!-- <text class="right_title">{{ userInfo.nickName }}</text> -->
        <view class="goto">
          <image src="../../static/images/goto_icon.png" mode=""></image>
        </view>
      </template>
    </i-lineRow>
    <i-lineRow title="个性签名" :diyRight="true">
      <template #right>
        <input class="input" type="text" v-model="formData.personalizedSignature" placeholder="请输入个性签名" />
        <view class="goto">
          <image src="../../static/images/goto_icon.png" mode=""></image>
        </view>
      </template>
    </i-lineRow>

    <i-lineRow title="渠道推荐人" :diyRight="true" @click="navToChannelRecommend">
      <template #right>
        <text class="right_title">{{
          userInfo.channelAgentRecommendUserBusinessId
        }}</text>
        <view class="goto">
          <image src="../../static/images/goto_icon.png" mode=""></image>
        </view>
      </template>
    </i-lineRow>

    <i-lineRow title="地址管理" @click="handleAddress('/pages/views/take_address')">
    </i-lineRow>
    <view style="height: 24rpx; width: 100%; background-color: #f3f4f5"></view>

    <i-lineRow title="修改密码" @click="toPassword('passowrd')"> </i-lineRow>

    <i-lineRow title="修改支付密码" @click="toPassword('pay')"> </i-lineRow>
    <!-- <i-lineRow
      title="更换账号"
      @click="handleAddress('/pages/views/replace_account')"
    >
    </i-lineRow> -->
    <i-lineRow title="账号" :diyRight="true">
      <template #right>
        <text class="right_title">{{ userInfo.mobile }}</text>
        <view class="goto">
          <image src="../../static/images/success_icon.png" mode="widthFix"></image>
        </view>
      </template>
    </i-lineRow>

    <view class="btn-box">
      <i-buttons radius="48rpx" bgColor="#EDEDED" color="#666" padding="24rpx 32rpx" fontSize="32rpx"
        @click="outLogin">退出登录</i-buttons>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import {
  navTo,
  showTost,
  setStorage,
  getStorage,
  clearStorage,
} from "../../utils/common";

import useStore from "../../stores/index";
import { editUserInfo, upload } from "../../api/index";

const isShow = ref(false);
const bindShow = ref(false);
const store = useStore();
const images = ref("");
const erCodeShow = ref(false);

const formData = reactive<any>({
  nickName: "",
  personalizedSignature: "",
  avatar: "",
});

const defaultInfo = reactive({
  nickName: "",
  personalizedSignature: "",
  avatar: "",
});

const userInfo: any = computed(() => {
  formData.nickName = store.userInfo.nickName;
  formData.personalizedSignature = store.userInfo.personalizedSignature;
  formData.avatar = store.userInfo.avatar;
  defaultInfo.nickName = store.userInfo.nickName;
  defaultInfo.personalizedSignature = store.userInfo.personalizedSignature;
  defaultInfo.avatar = store.userInfo.avatar;
  return store.userInfo;
});

const handleAddress = (path: string) => {
  uni.navigateTo({
    url: path
  })
}

const disabled = computed(() => {
  if (
    formData.nickName === defaultInfo.nickName &&
    formData.personalizedSignature === defaultInfo.personalizedSignature &&
    formData.avatar === defaultInfo.avatar
  ) {
    return true;
  }
  return false;
});

const showUploadImg = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: async (res) => {
      const { data } = await upload(res.tempFilePaths[0]);
      console.log(data, "data");
      formData.avatar = data;
    },
    fail: () => {
      // showTost('获取权限失败，请检查是否打开系统权限')
    },
  });
};

const toPassword = (type: string) => {
  if (type === "passowrd") {
    uni.navigateTo({
      url: "/pages/views/miss_password?title=修改密码"
    })
  } else if (type === "pay") {
    uni.navigateTo({
      url: "/pages/views/miss_PayPassword?title=修改支付密码"
    })
  }
};

const outLogin = () => {
  isShow.value = true;
};

const navToChannelRecommend = () => {
  if (userInfo.value.channelAgentRecommendUserBusinessId) {
    return;
  }
  uni.navigateTo({
    url: "/pages/user/channelRecommend",
  });
};

const outLog = () => {
  store.loginOut();
  showTost("退出登录成功", () => {
    uni.switchTab({
      url: "/pages/index/index",
    });
  });
};
const editInfo = async () => {
  console.log(formData, "formData");

  if (!formData.nickName) {
    showTost("请输入昵称");
    return;
  }
  uni.showLoading({
    title: "修改中...",
  });
  try {
    await editUserInfo({ ...formData, userId: store.userInfo.userId });
    showTost("修改成功");
    store.setUserInfo();
  } catch (error) {
    // showTost('修改失败')
  } finally {
    uni.hideLoading();
  }
};
</script>

<style lang="scss" scoped>
.userInfo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;

  .edit_info_box {
    height: 88rpx;
    width: calc(100% - 64rpx);
    margin: 0 auto;
    @include flexRS;

    .edit_info_title {
      @include titlefont(28rpx);
      color: #333;
    }
  }

  .input {
    text-align: right;
    color: #666;
  }

  .btn-box {
    padding: 24rpx 16rpx;
    margin-top: 100rpx;
  }

  .goto {
    flex: 1;
    width: 38rpx;
    height: 38rpx;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 80rpx;
    margin-right: 22rpx;
  }

  .right_title {
    @include dfont;
    margin-right: 8rpx;
    color: #666;
  }
}

.share_image {
  // background-color: #fff;
  width: 100%;
  @include flexCC;

  image {
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
  }

  text {
    @include dfont(26rpx);
    margin-top: 24rpx;
    color: #fff;
  }
}
</style>
